<template>
    <div class="app">
        <SecondRouter></SecondRouter>
        <piniaView></piniaView>
        <selfRouter></selfRouter>
        <hookIndex></hookIndex>
        <tsProp :list="personList"></tsProp>
        <tsProp ></tsProp>
        <tsIndex></tsIndex>
        <refCom></refCom>
        <watchEffect></watchEffect>
        <watch>
                <h1>默认插槽</h1>
                <template #slot1>
                    <h2>这里是插槽2(具名)的内容</h2>
                </template>
                <template #slot2="{options}">
                    <h2>这里是插槽3(具名作用域)的内容</h2>
                    <h1>{{ options.name }}</h1>
                </template>
        </watch>
        <Persons></Persons>
        <car></car>
    </div>
</template>
<script lang="ts" setup>
import piniaView from './components/piniaView.vue';
import SecondRouter from './components/secondRouter.vue';
import Persons from './components/Person.vue';
import selfRouter from './components/router.vue';
import car from './components/car.vue';
import watch from './components/watch.vue';
import watchEffect from './components/watchEffect.vue';
import refCom from './components/ref.vue';
import tsIndex from '@/ts/ts_index.vue';
import tsProp from '@/ts/ts_prop.vue';
import hookIndex from './hook/index.vue'

// #region
// TS prop 内容测试代码
import {type Person } from '@/types';
import { reactive } from 'vue';

let personList = reactive<Person[]>([
    {
        id:'asdasda01',
        name:'张三',
        age:12
    },
    {
        id:'asdasda02',
        name:'李四',
        age:13
    },
    {
        id:'asdasda03',
        name:'王五',
        age:14
    },
])

// TS prop 内容测试代码结束
// #endregion

</script>
<style>
.app{
    background-color: #ddd;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
</style>